<template>
	<view>
		<cu-custom bgColor="bg-gradual-blue" :isBack="false">

			<block slot="content">分类</block>
		</cu-custom>

		<swiper class="card-swiper" :class="dotStyle?'square-dot':'round-dot'" :indicator-dots="true" :circular="true"
		 :autoplay="true" interval="5000" duration="500" @change="cardSwiper" indicator-color="#8799a3"
		 indicator-active-color="#0081ff">
			<swiper-item v-for="(item,index) in swiperList" :key="index" :class="cardCur==index?'cur':''">
				<view class="swiper-item">
					<image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
					<video :src="item.url" autoplay loop muted :show-play-btn="false" :controls="false" objectFit="cover" v-if="item.type=='video'"></video>
				</view>
			</swiper-item>
		</swiper>

		<view class="cu-list grid" :class="['col-' + gridCol,gridBorder?'':'no-border']">
			<view class="cu-item" v-for="(item,index) in cuIconList" :key="index" v-if="index<gridCol*column" @tap="clickItem(item.url)">
				<view :class="['cuIcon-' + item.cuIcon,'text-' + item.color]">
					<view class="cu-tag badge" v-if="item.badge!=0">
						<block v-if="item.badge!=1">{{item.badge>99?'99+':item.badge}}</block>
					</view>
				</view>
				<text>{{item.name}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cuIconList: [{
					cuIcon: 'wenzi',
					color: 'red',
					badge: 120,
					name: '段子',
					url: '/duanzi'
				}, {
					cuIcon: 'font',
					color: 'orange',
					badge: 1,
					name: '美文',
					url: '/meiwen'
				}, {
					cuIcon: 'picfill',
					color: 'yellow',
					badge: 0,
					name: '心情',
					url: '/xinqing'
				}, {
					cuIcon: 'locationfill',
					color: 'olive',
					badge: 22,
					name: '签到',
					url: '/qiandao'
				}, {
					cuIcon: 'picfill',
					color: 'cyan',
					badge: 0,
					name: '沙雕图',
					url: '/shadiaotu'
				}, {
					cuIcon: 'clothesfill',
					color: 'blue',
					badge: 0,
					name: '冷笑话',
					url: '/lengxiaohua'
				}, {
					cuIcon: 'game',
					color: 'purple',
					badge: 0,
					name: '游戏',
					url: '/youxi'
				}, {
					cuIcon: 'questionfill',
					color: 'mauve',
					badge: 0,
					name: '推荐',
					url: '/tuijian'
				}, {
					cuIcon: 'playfill',
					color: 'purple',
					badge: 0,
					name: '音乐',
					url: '/yinyue'
				}, {
					cuIcon: 'recordfill',
					color: 'mauve',
					badge: 0,
					name: '电影',
					url: '/dianying'
				}, {
					cuIcon: 'questionfill',
					color: 'mauve',
					badge: 0,
					name: '秘密',
					url: '/mimi'
				}, {
					cuIcon: 'babyfill',
					color: 'purple',
					badge: 0,
					name: '漂流瓶',
					url: '/piaoliuping'
				}],
				modalName: null,
				gridCol: 3,
				column: 4,
				gridBorder: false,
				menuBorder: false,
				menuArrow: false,
				menuCard: false,
				skin: false,
				listTouchStart: 0,
				listTouchDirection: null,
				dotStyle: false,
				cardCur: 0,
				swiperList: [{
					id: 0,
					type: 'image',
					url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big84000.jpg'
				}, {
					id: 1,
					type: 'image',
					url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big37006.jpg',
				}, {
					id: 2,
					type: 'image',
					url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big39000.jpg'
				}, {
					id: 3,
					type: 'image',
					url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg'
				}, {
					id: 4,
					type: 'image',
					url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big25011.jpg'
				}, {
					id: 5,
					type: 'image',
					url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big21016.jpg'
				}, {
					id: 6,
					type: 'image',
					url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big99008.jpg'
				}]
			}
		},
		methods: {
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
			},
			hideModal(e) {
				this.modalName = null
			},
			Gridchange(e) {
				this.gridCol = e.detail.value
			},
			Gridswitch(e) {
				this.gridBorder = e.detail.value
			},
			DotStyle(e) {
				this.dotStyle = e.detail.value
			},
			cardSwiper(e) {
				this.cardCur = e.detail.current
			},
			clickItem(url) {
				console.log(url);
				uni.navigateTo({
					url: url
				});
			}
		}
	}
</script>

<style>
	.tower-swiper .tower-item {
		transform: scale(calc(0.5 + var(--index) / 10));
		margin-left: calc(var(--left) * 100upx - 150upx);
		z-index: var(--index);
	}

	.page {
		height: 100Vh;
		width: 100vw;
	}

	.page.show {
		overflow: hidden;
	}

	.switch-sex::after {
		content: "\e716";
	}

	.switch-sex::before {
		content: "\e7a9";
	}

	.switch-music::after {
		content: "\e66a";
	}

	.switch-music::before {
		content: "\e6db";
	}
</style>
